<template>
  <div style="margin-right: 20px; margin-left: -20px">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
    </BasicTable>
    <Detail @register="registerDesc"></Detail>
  </div>
</template>
<script lang="ts" name="user-access-log" setup>
import { ref, Ref, onMounted } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useListPage } from '/@/hooks/system/useListPage'
import { useUserStore } from "/@/store/modules/user";
import { pageAccessLog } from './UserSetting.api'
import * as eventApi from '/@/views/monitor/logEvent/api'
import { operateLogColumns, operateLogSearchFormSchema } from './UserSetting.data';
import Detail from './commponents/OperateLogDetail.vue';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
const [registerDesc, { openDrawer: openLogDesc }] = useDrawer();

const { prefixCls, tableContext } = useListPage({
  designScope: 'access-log',
  tableProps: {
    title: '操作日志',
    api: pageAccessLog,
    columns: operateLogColumns,
    beforeFetch: (params) => {  
      params.userId = useUserStore().getUserInfo.id
    },
    bordered: false,
    canResize: false,
    rowSelectionTipType: 'onTableTitle',
    actionColumn: {
      width: 130,
      title: '操作',
      dataIndex: 'action',
      fixed: false,
      slots: { customRender: 'action' },
    },
    formConfig: {
      labelWidth: 80,
      schemas: operateLogSearchFormSchema,
      fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']],
    },
  }
})

const [registerTable, { reload, getForm }, { }] = tableContext;

onMounted(async () => {
  const { updateSchema } = getForm()
  updateSchema({
    field: 'eventObjectKey',
    componentProps: ({ }) => {
      return {
        optionFilterProp: "label",
        labelField: 'eventValue',
        valueField: 'eventKey',
        showSearch: true,
        allowClear: true,
        api: eventApi.listLogEvent,
        params: {
          parentKey: '0'
        },
        onSelect: async (value: any, option: any) => {
          console.log("value", value);
          updateEventTypeSchema(value)
          reload()
        }
      }
    },
  })
})

const updateEventTypeSchema = (eventObjectKey) => {
  const { updateSchema } = getForm()
  updateSchema({
    field: 'eventTypeKey',
    componentProps: ({ }) => {
      return {
        optionFilterProp: "label",
        labelField: 'eventValue',
        valueField: 'eventKey',
        allowClear: true,
        showSearch: true,
        api: eventApi.listLogEvent,
        params: {
          parentKey: eventObjectKey
        },
        onSelect: async (value: any, option: any) => {
          reload()
        }
      }
    },
  })
}


function getActions(record) {
  return [
    {
      label: '详情',
      onClick: handleDesc.bind(null, record),
    },

  ];
}

function handleDesc(record) {
  openLogDesc(true, {
    record,
    isUpdate: true,
  });
}
</script>
